<template>
  <div class="detailContainer">
    <div>
      <div
        style="
          height: 100%;
          padding-left: 150px;
          padding-right: 150px;
          overflow-y: auto;
          padding-bottom: 70px;
        "
      >
        <div style="padding: 20px">
          <el-card>
            <div style="display: flex; justify-content: space-between">
              <div class="infoContainer">
                <div class="title">
                  <span class="name">{{ detailData.name }}</span>
                  <span class="id">{{ detailData.id }}</span>
                </div>
                <div class="detailInfo">
                  <div class="createInfo">
                    <span style="font-size: 15px"
                      >创建人：<span style="font-size: 14px; color: #969696">{{
                        detailData.creator
                      }}</span></span
                    >
                    <span style="font-size: 15px; margin-left: 20px"
                      >创建时间：<span
                        style="font-size: 14px; color: #969696"
                        >{{ detailData.createTime }}</span
                      ></span
                    >
                  </div>
                  <div class="updateInfo">
                    <span style="font-size: 15px"
                      >更新人：<span style="font-size: 14px; color: #969696">{{
                        detailData.updater
                      }}</span></span
                    >
                    <span style="font-size: 15px; margin-left: 20px"
                      >更新时间：<span
                        style="font-size: 14px; color: #969696"
                        >{{ detailData.updateTime }}</span
                      ></span
                    >
                  </div>
                </div>
                <div class="buttonGroup" style="margin-top: 20px">
                  <el-button type="primary" plain style="width: 80px"
                    >编辑</el-button
                  >
                  <el-button type="primary" plain style="width: 80px"
                    >删除</el-button
                  >
                  <el-button type="primary" plain style="width: 80px"
                    >完成装箱</el-button
                  >
                  <el-button type="primary" plain style="width: 80px"
                    >打印</el-button
                  >
                </div>
              </div>
              <div class="imgShow">
                <img
                  src="/public/packingImgs/packing.png"
                  alt=""
                  style="width: 80px"
                />
              </div>
            </div>
          </el-card>
          <el-card style="margin-top: 20px">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="1">基础信息</el-menu-item>
              <el-menu-item index="2">物料清单</el-menu-item>
            </el-menu>
            <div class="basicBody">
              <div class="basicInfoContainer" v-if="activeIndex == '1'">
                <div class="milestone">
                  <div class="milestone-content">基础信息</div>
                </div>
                <el-descriptions
                  style="width: 100%; margin-top: 40px; margin-bottom: 40px"
                  column="2"
                  label-width="120;"
                >
                  <el-descriptions-item label="领料单编号">{{
                    detailData.outboundNumber
                  }}</el-descriptions-item>
                  <el-descriptions-item label="领料单名称">{{
                    detailData.outboundName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="领料日期">{{
                    detailData.shipmentName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="领料人">{{
                    detailData.shipmentNumber
                  }}</el-descriptions-item>
                  <el-descriptions-item label="工单名称">{{
                    detailData.issueDate
                  }}</el-descriptions-item>
                  <el-descriptions-item label="工单编号">{{
                    detailData.saleNumber
                  }}</el-descriptions-item>
                  <el-descriptions-item label="工艺路线">{{
                    detailData.saleName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="工序名称">{{
                    detailData.customer
                  }}</el-descriptions-item>
                  <el-descriptions-item label="任务名称">{{
                    detailData.taskName
                  }}</el-descriptions-item>
                  <el-descriptions-item label="任务编号">{{
                    detailData.taskId
                  }}</el-descriptions-item>
                  <el-descriptions-item label="备注">{{
                    detailData.remark
                  }}</el-descriptions-item>
                </el-descriptions>
                <div class="milestone">
                  <div class="milestone-content">装箱信息</div>
                </div>
                <el-descriptions
                  style="width: 100%; margin-top: 40px; margin-bottom: 40px"
                  column="2"
                  label-width="120;"
                >
                  <el-descriptions-item label="箱子长度(CM)"
                    >111</el-descriptions-item
                  >
                  <el-descriptions-item label="箱子宽度(CM)"
                    >111</el-descriptions-item
                  >
                  <el-descriptions-item label="箱子高度(CM)"
                    >111</el-descriptions-item
                  >
                  <el-descriptions-item label="净重(KG)"
                    >111</el-descriptions-item
                  >
                  <el-descriptions-item label="毛重(KG)"
                    >111</el-descriptions-item
                  >
                  <el-descriptions-item label="包含子箱"
                    >111</el-descriptions-item
                  >
                </el-descriptions>
                <div class="milestone">
                  <div class="milestone-content">子籍信息</div>
                </div>
                <el-table border style="margin-top: 40px">
                  <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    width="60"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="装箱单名称"
                    width="100"
                    fixed="left"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="装箱单编号"
                    width="100"
                    fixed="left"
                  >
                  </el-table-column>
                  <el-table-column align="center" label="装箱日期" width="90">
                  </el-table-column>
                  <el-table-column align="center" label="订单编号" width="90">
                  </el-table-column>
                  <el-table-column align="center" label="客户名称" width="90">
                  </el-table-column>
                  <el-table-column align="center" label="客户编号" width="90">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="箱子长度(CM)"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="箱子宽度(CM)"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="箱子高度(CM)"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column align="center" label="净重(KG)" width="90">
                  </el-table-column>
                  <el-table-column align="center" label="毛重(KG)" width="90">
                  </el-table-column>
                  <el-table-column align="center" label="包含子箱" width="90">
                  </el-table-column>
                  <el-table-column align="center" label="备注" width="200">
                  </el-table-column>
                </el-table>
              </div>
              <div v-else style="padding: 20px">
                <el-button plain type="primary" style="width: 80px"
                  >导出</el-button
                >
                <el-table style="margin-top: 20px" :data="tableData">
                  <el-table-column
                    type="selection"
                    align="center"
                    fixed="left"
                  ></el-table-column>
                  <el-table-column
                    label="序号"
                    type="index"
                    width="60"
                    align="center"
                    fixed="left"
                  ></el-table-column>
                  <el-table-column
                    label="产品编号"
                    width="90"
                    align="center"
                    fixed="left"
                  ></el-table-column>
                  <el-table-column
                    label="产品名称"
                    width="90"
                    align="center"
                    fixed="left"
                  ></el-table-column>
                  <el-table-column
                    label="规格型号"
                    width="90"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="产品类型"
                    align="center"
                    width="90"
                  ></el-table-column>
                  <el-table-column
                    label="单位"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="工单编号"
                    width="90"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="工单名称"
                    width="90"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="批次号"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="有效期"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="装箱数量"
                    width="90"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    label="备注"
                    width="200"
                    align="center"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
      </div>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
const $router = useRouter();
let activeIndex = ref("1");

//mockData
let detailData = ref({
  name: "非常有用的产品装箱单",
  id: "CKBH20262251548",
  creator: "李小海",
  createTime: "2025-06-26 14:56:06",
  updater: "李小海",
  updateTime: "2025-06-26 14:56:06",
  remark: "",
  leader: "赵子龙",
  outboundNumber: "CKDH045424",
  outboundName: "产品测试单12255",
  shipmentName: "出货检验单023",
  shipmentNumber: "CHJYD1054",
  issueDate: "2023-01-19",
  saleNumber: "XSDBH1054",
  saleName: "新产品销售014",
  customer: "客户0203",
  productName: "新产品025",
  productNumber: "XCP0251",
  specifications: "20*30*60",
  unit: "kg",
  batchNumber: "2025553",
  receiptNum: "222",
  productionDate: "2023-04-08",
  dueDate: "2026-04-26",
  warehouseName: "仓库一",
  reservoirAreaName: "库区三",
  locationName: "库位二",
  warehouseManager: "王子虚",
});
let tableData = ref([{}]);
const isFooterVisible = ref(false);

onMounted(() => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
});

const close = () => {
  $router.replace("/storage/entrance/sale");
};
const handleSelect = (key: string, keyPath: string[]) => {
  activeIndex.value = keyPath[0];
};
</script>
  
  <style scoped lang="scss">
.detailContainer {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  .title {
    .name {
      font-weight: bold;
      font-size: 18px;
    }
    .id {
      color: #969696;
      font-size: 13px;
      margin-left: 10px;
    }
  }
  .detailInfo {
    margin-top: 10px;
    display: flex;
  }
  .updateInfo {
    margin-left: 40px;
  }
  .basicBody {
    width: 100%;
    .basicInfoContainer,
    .warehouseContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        margin-top: 20px;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .warehouseContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>
  